<template>
  <div class="wrapper-rank" :style="{'-webkit-overflow-scrolling': scrollMode}">
    <div class="rank-list pd16 my-rank-list">
      <div class="detail_desc my-rank-update">
        最新数据截止至{{ (new Date()) | parseTime }} 23:59，按日更新
      </div>
      <div class="detail_desc" style="opacity: 0.5;">学校竣工后，将从排行榜前500名中抽取2位去现场共同见证</div>
      <div v-if="noData">
        <br/>
        <span>暂时没有相应的数据</span>
      </div>
      <div v-else class="page-loadmore-wrapper">
        <mt-loadmore
              :bottom-method="loadBottom"
              :bottom-all-loaded="allLoaded"
              @bottom-status-change="handleBomChange"
              :autoFill="false"
              ref="loadmore">
          <div v-for="(item, index) in rankList" :key="index" class="rank-list">
            <div class="rank-item flex">
              <div class="rank-title">{{ item.rank }}</div>
              <img v-if="item.avatar" :src="item.avatar" width="30" height="30" class="user-image" />
              <img v-else src="../assets/images/us_avatar.png" width="30" height="30" class="user-image" />
              <div class="user-name">{{ item.userName }}</div>
              <div class="rank-num">{{ tranform(item.donateAmount) }}</div>
              <img src="../assets/images/bean.png" width="32" height="32" />
            </div>
          </div>
          <div slot="bottom" class="mint-loadmore-bottom">
            <span v-if="bomStatus !== 'loading'" :class="{ 'is-rotate': bomStatus === 'drop' }">加载更多...</span>
            <mt-spinner type="fading-circle" v-if="bomStatus === 'loading'"></mt-spinner>
          </div>
        </mt-loadmore>
      </div>
    </div>
    <div class="my-rank" v-if="user.userName">
      <div class="my-rank-fix">
        <div class="rank-item flex">
          <div class="rank-title">{{ user.rank }}</div>
          <img v-if="user.avatar" :src="user.avatar" width="30" height="30" class="user-image" />
          <img v-else src="../assets/images/us_avatar.png" width="30" height="30" class="user-image" />
          <div class="user-name">{{ user.userName }}</div>
          <div class="rank-num">{{ tranform(user.donateAmount) }}</div>
          <img src="../assets/images/bean.png" width="32" height="32" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../utils/request'
import { parseTime, countForShow } from '../utils'

export default {
  data () {
    return {
      pageNum: 0,
      pageSize: 50,
      total: 0,
      rankList: [],
      user: {},
      allLoaded: false,
      scrollMode: 'auto', // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      bomStatus: '',
      noData: false,
    }
  },
  filters: {
    parseTime(val) {
      if (val) {
        let date = val.setDate(val.getDate() - 1)
        return parseTime(date, '{y}.{m}.{d}')
      }
      return val;
    },
  },
  methods: {
    tranform(count) {
      return countForShow(count);
    },
    loadBottom() {
      // 加载更多数据
      setTimeout(() => {
        this.pageNum += 1;
        this.getResultList();
        this.$refs.loadmore.onBottomLoaded();
      }, 500);
    },
    handleBomChange(status) {
      this.bomStatus = status;
    },
    getResultList() {
      this.scrollMode = 'touch';
      request('/delay/api/welfare/rank', 'GET', {
        current: this.pageNum,
        size: this.pageSize,
      }).then(res => {
        console.log(res)
        if (res.state === 0) {
          this.user = res.data.user
          const tmp = res.data.userList
          tmp.forEach(rank => this.rankList.push(rank));
          this.total = res.data.count
          if (this.total === 0) this.noData = true;
          // 若数据已全部获取完毕
          if (this.total <= this.rankList.length) this.allLoaded = true;
        }
      })
     }
  },
  mounted() {
    this.getResultList();
    enddelay_title.postMessage('公益排行')
  }
}
</script>

<style lang="less" scoped>
.page-loadmore-wrapper {
  height:100%;
  overflow: scroll;
}
.wrapper-rank {
  background: #fff;
  color: #727E89;
  .mint-spinner-fading-circle{
    margin: 0 auto;
  }
  .mintui {
    font-size: 44px;
  }
}
.mint-loadmore-bottom span {
    display: inline-block;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    vertical-align: middle
}
.mint-loadmore-bottom span.is-rotate {
  transform: rotate(180deg);
}
.my-rank-list {
  padding: 36px 32px 0;
  box-sizing: border-box;
  min-height: calc(100vh - 177px);
  background: #fff;
}
.my-rank-update {
  margin-bottom: 9px;
}
.rank-item {
  color: #727E89;
  height: 75px;
  width: 100%;
  display: flex;
  align-items: center;
}
.rank-title {
  width: 50px;
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 24px;
}
.user-image {
  border-radius: 50%;
  margin-right: 15px;
  height: 45px;
  width: 45px;
}
.user-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: PingFangSC-Regular;
  font-size: 21px;
  color: #727E89;
}
.rank-num  {
  margin-right: 10px;
  font-family: PingFangSC-Regular;
  font-size: 21px;
  color: #727E89;
  text-align: right;
}
.rank-all {
  margin-top: 45px;
  font-family: PingFangSC-Regular;
  font-size: 21px;
  color: #727E89;
  text-align: center;
  span {
    margin-right: 10px;
  }
}
.my-rank {
  height: 147px;
  background: #fff;
}
.my-rank-fix {
  position: fixed;
  bottom: 0;
  background: #F5F5F5;
  padding: 40px 32px 0;
  left: 0;
  height: 177px;
  width: 100%;
  box-sizing: border-box;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
</style>